<template>
    <la-dialog
        ref="dialogRef"
        :title="dialogTitle"
        :async="true"
        @confirm="handleSubmit"
        @cancel="handleClose"
        fullscreen
      >
    <div class="admin-lists">
      <!-- <el-card class="border-none mb-2" shadow="never">
        <el-form style="margin-bottom: -16px" :model="queryParams" inline>
          <el-form-item label="字典标签" props="label">
            <el-input
              v-model="queryParams.label"
              clearable
              @keyup.enter="resetPage"
            />
          </el-form-item>

          <el-form-item label="字典值" props="value">
            <el-input
              v-model="queryParams.value"
              clearable
              @keyup.enter="resetPage"
            />
          </el-form-item>
        
  
          <el-form-item>
            <el-button type="primary" @click="resetPage">查询</el-button>
            <el-button @click="resetParams">重置</el-button>
           
          </el-form-item>
        </el-form>
      </el-card> -->
  
      <el-card class="border-none mb-4" shadow="never">
        <div>
          <el-button
            v-perms="['auth.admin/add']"
            type="primary"
            @click="handleAdd"
          >
            <template #icon>
              <el-icon><Plus /></el-icon>
            </template>
            新增
          </el-button>
        </div>
        <div class="mt-4" v-loading="pager.loading">
          <div>
            <el-table
              :data="pager.lists"
              size="large"
              row-key="id"
              default-expand-all
              :header-cell-style="{background:'var(--el-bg-color-page)'}"
            >
              <el-table-column prop="label" :label="item.name" min-width="100" v-for="(item,index) in columnList" :key="index">
                <template #default="{ row }">
                    <div v-if="item.type == 'input'">
                      {{ row?.value[item?.column] }}
                    </div>
                </template>
              </el-table-column>
            
              <el-table-column prop="weigh" label="权重" min-width="100" />
              <el-table-column prop="status" label="状态" min-width="100" >
                <template #default="{ row }">
                    <el-tag  v-if="row.status == 'normal'" type="success">正常</el-tag>
                    <el-tag  v-else type="info">禁用</el-tag>
                </template>  
              </el-table-column>
             
              <el-table-column
                prop="create_time"
                label="创建时间"
                min-width="180"
              />
              <el-table-column
                prop="update_time"
                label="更新时间"
                min-width="180"
              />
              <el-table-column label="操作" width="150" fixed="right">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    v-perms="['auth.admin/edit']"
                    @click="handleEdit(row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-perms="['auth.admin/delete']"
                    link
                    type="danger"
                    @click="handleDelete(row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="d-flex justify-content-end mt-4">
            <la-pagination v-model="pager" @change="getLists" />
          </div>
        </div>
      </el-card>
     
      <edit-dialog
        v-if="showEdit"
        ref="editRef"
        @success="getLists"
        @close="showEdit = false" 
      />
    </div>
  
    </la-dialog>
  </template>
  
  <script setup>
  import { reactive,ref,nextTick } from "vue";
  import api from "@/lnk/admin/api";
  import editDialog from "./components/edit-dict-data.vue";
  import { usePaging } from "@/lnk/hooks/usePaging";
  import feedback from '@/lnk/utils/feedback'
  import laDialog from "@/lnk/components/la-dialog/index.vue";
  
  const emit = defineEmits(["success", "close"]);
  const dialogRef = ref(null);
  const dialogTitle = ref('字典列表');
  const editRef = ref(null);
  const showEdit = ref(false);
  
  const queryParams = reactive({
    username:'',
    type_id:0,
  });

  const columnList = ref([]);
  
  const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: api.dictData.list,
    params: queryParams,
  });

  const state = reactive({
     type_id:0,
  })
  
  const handleAdd = async ()=>{
      showEdit.value = true;
      await nextTick()
      await editRef.value.setFormData({type_id:state.type_id})
      await editRef.value.open()
      
  }
  
  const handleEdit= async (row) => {
      showEdit.value = true;
      await nextTick()
      await editRef.value.setFormData(row)
      await editRef.value.open('edit')
      
  }
  
  const handleDelete = async (id)=>{
      await feedback.confirm('确定要删除？')
      const res = await api.dictData.delete({id});
      feedback.msgSuccess(res.msg);
      getLists();
  }
  const setFormData = async (row) => {
    state.type_id = row.id;
    queryParams.type_id = row.id;
    const typeRes = await api.dictType.read({ id: row.id });
    columnList.value = typeRes.data.column_list;
    getLists();
  }
  const open = (type = "add") => {
    // mode.value = type;
    dialogRef.value.open();
  };
  const close = () => {
    formRef.value.resetFields();
    dialogRef.value.close();
    emit("close");
  };
 
  defineExpose({
    open,
    setFormData
  });
  </script>
  